import '../ui/layui.all'
import '../ui/extent/draggabilly.pkgd'
import '../ui/css/layui.css'
import '../ui/css/modules/code.css'
import '../ui/css/modules/layer/default/layer.css'
import '../ui/css/modules/laydate/default/laydate.css'
import './layermanage.css'
import {createModel,creatGeojsonLayer,creat3DTileset} from "../ModelControl/addmodel"

import editModel from '../ModelControl/editModel'
const LayerManage = function(views){
    this.views = views
    var self = this
    this.data = null
    this.temp = '<div class="cesium-widget-title">'+
    '<div class="title-info"><i class="layui-icon layui-icon-template-1"></i>图层管理</div>'+
    '<div class="title-btn">'+
        '<i class="layui-icon layer-btn layui-icon-close" data-method="close"></i>'+
   '</div></div>'+
    '<div class="cesium-widget-cont">'+
       '<div id="LayermanageTree" class="demo-tree demo-tree-box"></div>'+
    '</div>'
    this.contanner = this._drawWidget()
    this.editModel = new editModel(views)
    //保存所有已添加的图层
    this.layerList = {

    }
    this.layeradds = {
        gltf:function(layerNode){
            //如果该图层已经添加过
            if(!self.layerList[layerNode.id]){
                self.layerList[layerNode.id] = createModel(self.views,layerNode.url,{
                    lng:layerNode.position.x,
                    lat:layerNode.position.y,
                    height:layerNode.position.z,
                    heading:layerNode.position.heading,
                    pitch:layerNode.position.pitch,
                    roll:layerNode.position.roll,
                    scale:layerNode.scale
                   
                })
            }else{
                self.views.entities.add(self.layerList[layerNode.id])
            }
        },
        geojson:function(layerNode){
            if(!self.layerList[layerNode.id]){
                self.layerList[layerNode.id] = creatGeojsonLayer(self.views,layerNode.url)
            }else{
                self.views.dataSources.add(self.layerList[layerNode.id])
            }
            
        },
        dtiles:function(layerNode){
            self.layerList[layerNode.id] = creat3DTileset(self.views,layerNode.url,{
                lng:layerNode.position.x,
                lat:layerNode.position.y,
                height:layerNode.position.z,
                heading:layerNode.position.heading,
                pitch:layerNode.position.pitch,
                roll:layerNode.position.roll,
                scale:layerNode.position.scale
            })
        }
    }
    this.layerremoves = {
        gltf:function(layerNode){
            if(self.layerList[layerNode.id]){
                self.views.entities.remove(self.layerList[layerNode.id])
            }
        },
        geojson:function(layerNode){
            if(self.layerList[layerNode.id]){
                self.views.dataSources.remove(self.layerList[layerNode.id])
            }
        },
        dtiles:function(layerNode){
            if(self.layerList[layerNode.id]){
                self.views.scene.primitives.remove(self.layerList[layerNode.id])
            }
        }
    }
}
LayerManage.prototype={
    openWidget:function(){
        this.contanner.style.display = "block"
    },
    closeWidget:function(){
        this.contanner.style.display = "none"
    },
    initData:function(data){
       this.data = data
       this._bind()
    },
    _drawWidget:function(){
        var dom =  document.createElement("div");
        dom.className = "cesium-widget";
        dom.id="layerManage"
        dom.innerHTML = this.temp;
        var body = document.getElementsByTagName("body")[0];
        body.appendChild(dom);
        this._bind()
        //让组件可以拖动，只在父容器中，并只能点击.cesium-widget-title拖动
        $('#layerManage').draggabilly({ containment: true , handle: '.cesium-widget-title' });
        return dom
    },
    _bind:function(){
        var tree = layui.tree
        var layer = layui.layer
        var self = this
        var active = {
            close:function(){
                self.closeWidget()
            }
        }
        //基本演示
        tree.render({
            elem: '#LayermanageTree'
            ,data: this.data
            ,showCheckbox: true  //是否显示复选框
            ,id: 'LayerList'
            ,accordion: false 
            ,click: function(obj){
                var data = obj.data;  //获取当前点击的节点数据
                layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
                if(!data.children && self.layerList[data.id] ){
                    self.editModel.startEdit(data.type,self.layerList[data.id],data.position)
                }
            }
            ,oncheck: function(obj){
                var data = obj.data;  //获取当前点击的节点数据
                self.checkedLayer.apply(self,[data,obj.checked])
            
                // layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
            }
        });
        $('#layerManage .layer-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    },
    checkedLayer:function(threenode,checked){
        // var self = this
        var node = threenode
        if(node.children){
            node.children.forEach(childNode => {
                this.checkedLayer(childNode,checked)
            });
        }else{
            layer.msg(node.title+":"+checked);
            console.log(node.title+":"+checked)
            if(checked){
                this.layeradds[node.type](node)
            }else{
                this.layerremoves[node.type](node)
            }
        }
    },  
    addLayer:function(layer){

    }
}
export default LayerManage